import React, { useCallback, useState } from "react";
import $axios from '@/plugins/request'

import { Form, Input, Button, Checkbox, message, Row, Col, Image } from 'antd';
import {
  UserOutlined,
  LockOutlined,
  RadarChartOutlined
} from '@ant-design/icons';



function Login(props) {
  const [captcha, setCaptcha] = useState("/api/users/captcha")
  const rules = {
    username: [{ required: true, message: '请输入用户名!', }],
    password: [{ required: true, message: '请输入密码!', }],
    captcha: [{ required: true, message: '请输入验证码!', }]
  }
  const onFinish = useCallback(async (values) => {
    const { data: dataimg } = await $axios.get("/api/users/captcha/" + values.captcha)
    if (dataimg.code !== 1) return message.warning(dataimg.msg)
    values.isadmin = "1"
    const { data } = await $axios.post('/api/users/login', values)
    // console.log('data', data);
    if (data.code != 1) {
      return message.warning(data.msg)
    } else {
      message.success(data.msg);
      localStorage.setItem('userInfo', JSON.stringify(data.data))
      props.history.push('/manage')
    }
    return data;
  }, [])
  const onvscode = useCallback(async () => {
    setCaptcha(captcha + "?")
  }, [captcha])

  return (
    <>
      <div style={{ background: `url(${require("@/assets/img/background.png").default})`, height: "100vh", width: "100vw" }}>
      </div>
      <Form
        name="loginForm"
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 20 }}
        initialValues={{ remember: true }}
        onFinish={onFinish}
        autoComplete="off"
        onSubmit={onFinish}
        style={{ width: 480, padding: 10, textAlign: "center", border: '1px solid black', position: "absolute", left: "30%", top: 100, boxShadow: "3px,3px,#ccc" }}
      >
        <h3>党员信息管理系统登录界面</h3>
        <Form.Item label="用户名" name="username" rules={rules.username} style={{ marginTop: 20 }}>
          <Input prefix={<UserOutlined className="site-form-item-icon" />} autoComplete="off" />
        </Form.Item>
        <Form.Item label="密码" name="password" rules={rules.password}>
          <Input.Password prefix={<LockOutlined className="site-form-item-icon" />} autoComplete="off" />
        </Form.Item>
        <Form.Item label="验证码" name="captcha" rules={rules.captcha}>
          <Row gutter={8}>
            <Col span={16}>
              <Input prefix={<RadarChartOutlined className="site-form-item-icon" />} autoComplete="off" />
            </Col>
            <Col span={8}>
              <Image
                width={120}
                height={32}
                src={captcha}
                preview={false}
                onClick={onvscode}
              />
            </Col>
          </Row>
        </Form.Item>
        <Form.Item name="remember" valuePropName="checked" wrapperCol={{ offset: 4, span: 16 }}>
          <Checkbox>记住我</Checkbox>
        </Form.Item>
        <Form.Item wrapperCol={{ offset: 4, span: 16 }}>
          <Button type="primary" htmlType="submit">登录</Button>
        </Form.Item>
      </Form>
    </>
  )

}
export default Login;